// src/components/DynamicRenderer.js
import React from "react";
import { Box, VBox, HBox, Image, Text, NavSelect } from "@/components";

/*
 ** $type：组件类型，用于从 registry（或 payload.registry）中获取对应组件。
 ** $tooltip：可选，为该组件设置 tooltip。
 ** $when：可选，动态条件表达式，根据其结果决定是否渲染此组件。
 ** $debug：可选，打开此组件的调试开关。
 ** $key：可选，指定在列表中使用哪一个属性值作为唯一键。
 ** $action：可选，为该组件设置一个链接或点击回调（onClick）动作。
 ** $payload：可选，为该组件的子级组件树设定共享的数据，对子组件提供上下文数据（通常从 store selector 获取）。
 ** $content：可选，定义单个子组件或子组件列表的 schema，将作为一个新的 Grafton 组件树层级来渲染，会映射为组件的 children prop。
 ** $mapping：可选，用于将数据数组中的项目属性映射到相应的 schema 中，以便逐项渲染。
 */
const renderComponent = (schema) => {
  if (Array.isArray(schema)) {
    return schema.map((item, index) => {
      return renderComponent(item);
    });
  }
  const {
    $type,
    $tooltip,
    $when,
    $debug,
    $key,
    $action,
    $payload,
    $content,
    $mapping,
    ...props
  } = schema;
  switch ($type) {
    case "div":
      return (
        <div title={$tooltip} {...props}>
          {renderComponent(schema.$content)}
        </div>
      );
    case "Box":
      return (
        <Box title={$tooltip} {...props}>
          {renderComponent(schema.$content)}
        </Box>
      );
    case "VBox":
      return (
        <VBox title={$tooltip} {...props}>
          {renderComponent(schema.$content)}
        </VBox>
      );
    case "HBox":
      return (
        <HBox title={$tooltip} {...props}>
          {renderComponent(schema.$content)}
        </HBox>
      );
    case "Image":
      return <Image title={$tooltip} {...props} />;
    case "Text":
      return <Text title={$tooltip} {...props} />;
    case "NavSelect":
      return <NavSelect title={$tooltip} {...props} />;
  }
};

const DynamicRenderer = ({ schema }) => {
  // const renderComponent = (data) => {
  //   const {type} = data
  //   const Component = components[type];

  // if (!Component) {
  //   return node;
  // }

  // if (props.children) {
  //   props.children = Array.isArray(props.children)
  //     ? props.children.map((child, index) =>
  //         renderComponent(child, `${key}-${index}`)
  //       )
  //     : renderComponent(props.children, key);
  // }

  // return <Component key={key} {...props} />;
  // };

  return <React.Fragment>{renderComponent(schema)}</React.Fragment>;
};

export default DynamicRenderer;
